<template>
    <a-modal :title="formTile + '颜色'" :visible="true" width="50%" :footer="null" @cancel="reset">
        <div class="main">
            <a-card>
                <a-form-model ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="rules">
                    <a-form-model-item label="规格" prop="code">
                        <a-select v-model="form.code" placeholder="请选择规格" show-search @search="handleSearch"
                            @change="handleChange" :filterOption="filterOption" :disabled="disabled">
                            <a-select-option v-for="(item) in specsList" :key="item.code" :value="item.code"
                                :title="item.name">
                                {{ item.code }}-{{ item.name }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="凑卷数量" prop="pieceNumber">
                        <a-input placeholder="请输入凑卷数量" v-model="form.pieceNumber" />
                    </a-form-model-item>

                    <a-form-model-item label="规格状态" prop="status">
                        <a-radio-group v-model="form.accSpecsStatus">
                            <a-radio :value="10">
                                启用
                            </a-radio>
                            <a-radio :value="20">
                                禁用
                            </a-radio>
                        </a-radio-group>

                    </a-form-model-item>
                    <a-form-model-item label="过检针等级">
                        <a-select v-model="form.checkGrade" placeholder="过检针等级" show-search :filterOption="filterOption"
                            @change="handleChangeGrade">
                            <a-select-option v-for="(item) in gradeList" :key="item.code" :value="item.code"
                                :title="item.name">
                                {{ item.name }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="备注" prop="remark">
                        <a-input placeholder="请输入备注" type="textarea" v-model="form.remark" />
                    </a-form-model-item>

                    <a-form-model-item>
                        <a-row style="margin-top:10px">
                            <a-col :span="16" :offset="18" class="info-action">
                                <a-button @click="reset">
                                    重置
                                </a-button>
                                <a-button :style="{ marginLeft: '8px' }" type="primary" @click="onSubmit"
                                    :loading="loading">
                                    保存
                                </a-button>
                            </a-col>
                        </a-row>
                    </a-form-model-item>
                </a-form-model>
            </a-card>
        </div>

    </a-modal>
</template>
  
<script>
import { postAction } from '@/api/manage'
import { seachSpecs, getDictChildList } from '@api/material/index'

export default {
    components: {},

    props: {
        specsDetail: {
            type: Object,
            default: null
        },
        specsIndex: {
            type: Number,
            default: null
        }
    },

    data() {
        return {
            urlKey: 'basemgt-material/',
            labelCol: { span: 5 },
            wrapperCol: { span: 16 },
            gradeList: [],
            disabled: false,
            form: {
                code: undefined,
                name: '',
                pieceNumber: '',
                checkGradeValue: undefined,
                checkGrade: undefined,
                accSpecsStatus: 10,
                remark: '',
                materialSpecsId: ''
            },
            rules: {
                code: [{ required: true, message: '请选择规格', trigger: 'blur' }],
            },
            specsList: [],
            loading: false
        }
    },

    created() {
        const { specsDetail } = this.$props
        if (specsDetail) {
            if (this.$route.query.examine == 10) {
                this.disabled = true
            }
            this.formTile = '编辑'
            this.form = specsDetail
        } else {
            this.formTile = '新增'
        }
        this.handleSearch('')
        this.getGradeList()

    },
    mounted() { },
    computed: {
        jobNumber() {
            return this.$store.getters.userInfo.workNo || ''
        }
    },
    methods: {
        async handleSearch(value) {
            console.log(value);
            const res = await seachSpecs({ keyWord: value })
            if (res.code == 200) {
                this.specsList = res.data
            } else {
                if (res.msg) {
                    this.$message.error(res.msg)
                } else {
                    this.$message.error('获取规格列表失败！')
                }
            }
        },
        handleChange(value) {
            this.specsList.map((item) => {
                if (item.code == value) {
                    this.form.materialSpecsId = item.materialSpecsId
                    this.form.name = item.name
                    this.form.status = item.status
                }
            })
        },
        handleChangeGrade(value) {
            this.gradeList.map(item => {
                if (item.code == value) {
                    this.form.checkGrade = item.code
                    this.form.checkGradeValue = item.name
                }
            })
        },
        async getGradeList() {
            const params = {
                name: 'CHECK_GRADE',
            }
            try {
                const res = await getDictChildList(params)
                if (res.code == 200) {
                    this.gradeList = res.data
                } else {
                    if (res.msg) {
                        this.$message.error(res.msg)
                    } else {
                        this.$message.error('获取过检针等级列表失败！')
                    }
                }
            } catch (error) {
                this.$message.error('获取过检针等级列表失败！')
            }
        },
        onSubmit() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.submit()
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        filterOption(input, option) {
            if (option && option.props && option.props.title) {
                return option.props.title === input || option.props.title.indexOf(input) !== -1
            } else {
                return true
            }
        },
        reset() {
            this.$refs.ruleForm.resetFields()
            this.$emit('closespecs')
        },
        getDetail() {
            const params = {
                accSupplyId: this.accSupplyId
            }
            try {
                postAction(`${this.urlKey}material/specs/info`, params).then(res => {
                    if (res.code == 200) {
                        this.form = res.data
                    } else {
                        this.$message.warning(res.msg)
                    }
                })
            } catch (error) {
                this.$message.warning('获取详情失败！')
            }
        },
        submit() {
            const params = JSON.parse(JSON.stringify(this.form))
            this.$emit('closespecs', params, this.specsIndex)
        }
    }
}
</script>
<style scoped>
.info-action {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
}

.ml-20 {
    margin-left: 20px;
}
</style>